<template>
  <div style="width: 493px">
    <div class="flex calendar-title">
      <a @click="setMonthNum(false)"
         class="el-icon-arrow-left"></a>
      <div @click="getMonthDay">{{ setYear }}年</div>
      <a @click="setMonthNum(true)"
         class="el-icon-arrow-right"></a>
    </div>
    <ul class="days">
      <li v-for="(item,index) in info"
          :style="index%6===0?border:''">
        <div @click="handleMonth(item)"
             class="calendar-month-top"
             @mouseenter="getNum">
          {{ item.months | month }}
        </div>
        <div @click.stop="handleSetTime(item)"
             :class="item.months===setMonth&&getYear===setYear?'active':'no-active'">
          <div v-show="showZero||item.num>0"
               @click="handleCurrent(item,false)">{{
            item.num }}pcs
          </div>
          <div v-show="showZero||item.weight>0"
               @click="handleCurrent(item,true)">{{
            item.weight }}t
          </div>
        </div>
      </li>
      <div class="clear"></div>
    </ul>
  </div>
</template>
<script>
import { getLocalTime } from '@/utils/dateFormat'

export default {
  name: 'calendar',
  props: {
    getData: {
      type: Function,
      require: true
    },
    showZero: {
      type: Boolean,
      default: false
    },
    isClickMonth: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      setMonth: new Date().getMonth() + 1,
      setYear: new Date().getFullYear(),
      setDay: new Date().getDate(),
      getYear: new Date().getFullYear(),
      info: [],
      calendarDay: [],
      dateType: 'month',
      border: 'border-left:1px solid #ffffff',
      search: '',
      keyWord: '',
      keyWords: [],
      isManyChoice: false,
      isTrue: true
    }
  },
  mounted() {
    this.getMonthDay()
  },
  methods: {
    getMonthDay() {
      let toMonth = 12
      let date = new Date(this.setYear, this.setMonth - 1, '1')
      this.info = []
      for (let i = 0; i < toMonth; i++) {
        this.info.push({
          months: i + 1,
          month: '',
          weight: '',
          num: ''
        })
      }
      let params = {
        search_EQ_dateType: this.dateType,
        search_GTE_dateTime: getLocalTime(date, 'YYYY-MM-DD')
      }
      this.$emit('setDate', params.search_GTE_dateTime)
      // if(this.search){
      //     if (this.isManyChoice){
      //         if (this.keyWords && this.keyWords.length > 0){
      //             this.keyWord = this.arrayToString(this.keyWords)
      //         } else {
      //             this.keyWord = ""
      //         }
      //     }
      //     params[this.search]=this.keyWord
      // }
      this.getData(this.setYear).then(res => {
        console.log('月份', res.data)
        this.$emit('data', JSON.parse(JSON.stringify(res.data)))
        this.calendarDay = res.data.monthVo
        this.info.map((m, i) => {
          this.calendarDay.map((f, index) => {
            if (m.months === Number(f.date.split('-')[1])) {
              this.info[i].month = f.month
              this.info[i].weight = f.weight
              this.info[i].num = f.num
            }
          })
        })
      })
      let val = {
        months: this.setMonth,
        month: params.search_GTE_dateTime
      }
      this.handleCurrent({}, this.isTrue)
      if (!this.isClickMonth) {
        this.$emit('month', val)
      }
    },
    arrayToString: function(arr) {
      let value = ''
      if (arr != null && arr != '' && arr.length > 0) {
        arr.forEach((column, index) => {
          value = value + ',' + column
        })
        value = value.substring(1)
      }
      return value
    },
    setMonthNum(bool) {
      if (bool) {
        this.setYear = Number(this.setYear) + 1
      } else {
        this.setYear = Number(this.setYear) - 1
      }
      this.getMonthDay()
    },
    handleCurrent(item, bool) {
      let date = new Date(this.setYear, this.setMonth - 1, '1')
      let data = {
        data: item,
        date: getLocalTime(date, 'YYYY-MM-DD')
      }
      this.isTrue = bool
      if (bool) {
        this.$emit('worked', data)
      } else {
        this.$emit('work', data)
      }
    },
    handleMonth(item) {
      console.log(item)
      if (item.month) {
        this.$emit('handleMonth', item)
      }
      if (this.isClickMonth) {
        this.$emit('setDate', item.month)
        this.setMonth = item.months
        this.setYear = item.month.split('-')[0]
        this.getYear = item.month.split('-')[0]
        this.handleCurrent({}, this.isTrue)
      }
    },
    getNum(item) {
      this.$emit('handleMonthNum', item)
    },
    handleSetTime(val) {
      this.$emit('month', val)
      this.setMonth = val.months
      this.setYear = val.month.split('-')[0]
      this.getYear = val.month.split('-')[0]
      this.handleCurrent({}, this.isTrue)
      this.$emit('setDate', val.month)
    }
  },
  computed: {},
  filters: {
    month(val) {
      const cn = [
        '一',
        '二',
        '三',
        '四',
        '五',
        '六',
        '七',
        '八',
        '九',
        '十',
        '十一',
        '十二'
      ]
      if (val !== '') {
        return cn[val - 1] + '月'
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-title {
  height: 45px;
  padding: 0 20px;
  background-color: #c4d7e8;
  border-left: 1.5px solid #fff;
  border-right: 1px solid #fff;
}

.calendar-title a {
  color: #ffffff;
  font-size: 22px;
}

.flexCenter {
  display: flex;
  align-items: center;
}

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

body {
  font-family: Verdana, sans-serif;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.weekdays {
  margin: 0;
  /*border-top: 1px solid #ffffff;*/
  border-left: 1px solid #ffffff;
}

.weekdays li {
  display: inline-block;
  width: 82px;
  color: #666;
  text-align: center;
  border-right: 1px solid #ffffff;
  height: 35px;
  line-height: 35px;
  /*border-bottom:1px solid #eee ;*/
}

.days {
  margin: 0;
  /*border-top: 1px solid #ffffff;*/
  border-left: 1px solid #ffffff;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 82px;
  text-align: center;
  font-size: 12px;
  color: #777;
  float: left;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  height: 102px;
  padding: 0;
}

.days li {
  /*padding: 5px;*/
}

.no-active {
  background: #f5f4f4;
  color: #349bfe;
  height: 50px;
  line-height: 25px;
  position: relative;
  font-size: 14px;
}

.no-active .info-bg {
  color: #409efe !important;
  line-height: 50px;
}

.active {
  background: #409efe;
  color: #feff02 !important;
  height: 50px;
  line-height: 25px;
  position: relative;
  font-size: 14px;
}

.active .info-bg {
  color: #feff02 !important;
  line-height: 50px;
}

.lteDay {
  background-color: #f9f9f9;
}

.info-bg {
  cursor: pointer;
  color: #409efe;
  font-size: 16px;
}

.num {
  cursor: pointer;
  background-color: red;
  color: #fff;
  min-width: 20px;
  border-radius: 7px;
  position: absolute;
  top: 2px;
  right: 2px;
}

.calendar-month-top {
  color: #315585;
  background-color: #e7f2f7;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 2px solid #fff;
}
</style>
